$class-prefix-spin-loading: rt-spin-loading;

.#{$class-prefix-spin-loading} {
  --color: var(--rt-color-weak);
  --size: 20px;

  width: var(--size);
  height: var(--size);
  display: inline-block;

  &-block {
    display: block;
  }

  &.rt-spin-loading-full {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;

    > .#{$class-prefix-spin-loading}-inner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: var(--size);
      height: var(--size);
    }
  }

  &-inner {
    .#{$class-prefix-spin-loading}-svg {
      width: 100%;
      height: 100%;
      animation: rt-spin-loading-rotate 0.8s infinite linear;
      
      > .rt-spin-loading-fill {
        stroke: var(--color);
      }
    }
  }
}

@keyframes rt-spin-loading-rotate {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
